@import '~antd/es/style/themes/default.less';

html,
body,
#root {
  height: 100%;
}

.colorWeak {
  filter: invert(80%);
}

.ant-layout {
  min-height: 100vh;
}
.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
  left: unset;
}


// 菜单栏标题h1样式
.ant-pro-top-nav-header-logo h1{
  font-weight: 800;
}


/***********************************************************************
全局按钮样式定制
***********************************************************************/

// primary主按钮样式
.ant-btn-primary{
  font-size: 14px;
  font-weight: normal;
  color: white;
  background-color: #22A800;
  border-color: #22A800;
  border-radius: 2px;
  padding: 0px 16px;
  height: 32px;

  &:hover{
    background-color: #6FC659;
    border-color: #6FC659;
  }
}


// default次按钮样式
.ant-btn-default{
  font-size: 14px;
  font-weight: normal;
  color: #5A5A5A;
  background-color: white;
  border-radius: 2px;
  border-color: #D7D7D7;
  padding: 0px 16px;
  height: 32px;

  &:hover{
    color: #22A800;
    border-color: #22A800;    
  }
}

/***********************************************************************
以下是 page区域 UI设计规范 屏幕足够大时 page最大宽度1200 屏幕缩小时先确保左右120 padding
***********************************************************************/
/*content区域最大宽度1200 页面居中 顶部边距24*/
.ant-layout-content{
  // border: 1px solid red;
  // box-shadow: 2px 2px 1px #888888;
  width: 100%;
  height: 100%;
  max-width: 1440px !important; //page view 1200 + 两边120 padding
  padding-left: 120px !important; //屏幕再小 优先保证两边的留白 让用户view有安全感，非常赞的UI设计
  padding-right: 120px !important; //屏幕再小 优先保证两边的留白 让用户view有安全感，非常赞的UI设计
  margin-left: auto !important;  //大屏幕 page view确保1200 左右边距自动放大
  margin-right: auto !important; //大屏幕 page view确保1200 左右边距自动放大
  margin-top: 22px !important; //顶部边距22
  margin-bottom: 0px !important; //底部边距0

  /* page页面容器 */
  .ant-pro-page-container{
    margin: 0px !important; //页面view与layout紧邻
    min-height: 640px !important; //确保页面最小高度
    // height: calc(100vh - 140px) !important; //客户端view的样式，已废弃
    // overflow-y: auto; //客户端样式的垂直滚动，已废弃

    // 页面标题区域样式
    .ant-pro-page-container-warp{
      // border: 1px solid green;
      padding-top: 32px;
      padding-bottom: 24px;
      padding-left: 32px;

      // 页面标题文字栏样式
      .ant-page-header{
        padding: 0px;
        margin: 0px;
        // border: 1px solid red;
      }
      // 页面标题样式
      .ant-page-header-heading-title{
        color: #272727;
        border-bottom: 4px solid #237804;
      }
    }

    /* page页面内容容器 */
    .ant-pro-page-container-children-content{
      margin: 0px !important;
    }

    // 搜索栏样式
    .pagehead-searchbar{
      // border: 1px solid green;
      height: auto;
      padding: 0px 32px 0px 32px;
      background-color: white;
      margin-bottom: 24px;

      // 搜索按钮组样式
      .ant-form-item:last-child{
        // padding: 0px 0px 0px 24px;
        margin: 0px;
        min-width: auto !important;
      }


      // 搜索item的文字标签样式
      .ant-form-item  label{
        color: #272727;
        font-size: 14px;
        width: 80px !important;
        text-align: right !important;
      }
      
      // 搜索item的input框样式
      .ant-form-item .ant-form-item-control input{
        border-radius: 2px;
        border-color: #D7D7D7;
        font-size: 14px;
        font-weight: normal;
        color: #272727;
      }

      // 搜索按钮的样式
      .ant-form-item .ant-form-item-control button{
        margin-right: 8px;
      }
      // 最后一个按钮去掉右侧的margin
      .ant-form-item .ant-form-item-control button:last-child{
        margin-right: 0px;
      }
    }

    .ant-pro-footer-bar{
      max-width: 1200px !important; //1200+两边120margin
      margin-left: auto !important;  //大屏幕 page view确保1200 左右边距自动计算
      margin-right: auto !important; //大屏幕 page view确保1200 左右边距自动计算
      right: auto !important;
    }

  }


}

// footer copyright样式控制
.ant-pro-global-footer{
  margin: 0px !important;
  height: 0px !important;
  .ant-pro-global-footer-copyright{
    line-height: 50px;
  }
}


// 横向Form样式定制
.ant-form-inline .ant-form-item{
  min-width: 300px !important;
  padding-left: 32px !important;
  text-align: left;
  margin-bottom: 24px !important; //上下两组搜索框间距24
}

// 最小高度468
.minHeight468{
  min-height: 468px !important;
}

// 表格区域 包含toolbar和table 有最小高度
.ourCard{

  border-radius: 2px;
  background-color: white;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 14px;

  .header{
    height: 56px;
    width: 100%;
    // padding: 0px 32px 0px 32px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;

    .title{
      font-size: 16px;
      font-weight: normal;
      color: #272727;
    }

    .toolbtn{
      button{
        margin-left: 8px;
      }
    }
  }

  .content{
    padding: 0px 0px 32px 0px;

    .flex-form{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .ant-form-item{
        // border: 1px solid green;
        width: 33% !important; // 宽屏时 三等分 排布 item
        min-width: 300px !important; // 窄屏时 确保 最小宽度 item自动垂直顺序排布
        padding: 0px 14px 0px 14px;

        .ant-picker{
          width: 100% !important;
        }
      }
    }

    .recordAction{
      color: #1890FF !important;
    }
    .ant-table-pagination{
      padding-right: 32px !important;
    }    
  }

}


/**
全局控制 普通弹窗表单样式
*/
.ant-modal-content{
  border-radius: 4px !important;
  box-shadow: 4px 0px 12px rgba(0, 0, 0, 0.45) !important;


  form{
    padding-left: 20px !important;
    padding-right: 20px !important;

    .ant-form-item{
      width: 100%;
      // text-align: right;
      .ant-form-item-label{
        flex: none;
        width: 100px !important;
      }
      .ant-form-item-control{
        flex: none;
        width: 200px !important;
        margin-left: 12px;
        padding: 0px !important;
        .ant-form-item-control-input{
          flex: none;
          width: 300px !important;

          .ant-picker{
            width: 300px !important;
          }
          .ant-input-group .ant-select-selector{
            width: 75px !important;
          }
        }   
      }
   
    }


  }
}

/**
页面宽度的大弹窗表单样式
*/


canvas {
  display: block;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
  list-style: none;
}

@media (max-width: @screen-xs) {
  .ant-table {
    width: 100%;
    overflow-x: auto;
    &-thead > tr,
    &-tbody > tr {
      > th,
      > td {
        white-space: pre;
        > span {
          display: block;
        }
      }
    }
  }
}

// Compatible with IE11
@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
  body .ant-design-pro > .ant-layout {
    min-height: 100vh;
  }
}

